<template>
  <div>
    <button ref="printbtn" class="myprintbtn" ="'#myprintDom'"></button>
    <div id="myprintDom" class="nocalssvw" style="font-family: SimSun;">
      <div class="print-warp" style="page-break-before:always;" v-for="(item, ix) in list" :key="ix">
        <p style="font-size: 30px;color: 333;font-weight:normal;text-align: center;">干 部 任 免 审 批 表</p>
        <table border="1" class="primt-table print-tableOne">
          <thead>
            <tr style="border:solid 1px #333;height:45px">
              <td style="width: 40px;">姓&nbsp;名</td>
              <td style="width: 100px;">{{ item.xingming }}</td>
              <td style="width: 48px;">性&nbsp;别</td>
              <td style="width: 100px;" class="ptw84">{{ item.xingbie }}</td>
              <td style="width: 48px;">出生年月<br>(岁)</td>
              <td style="width: 100px;">{{ item.csny }}<br>({{item.age}}岁)</td>
              <td rowspan="4" colspan="2" style="width: 120px;height: 210px;">
                <img style="width: 100%;height: 100%;" :src="item.zhaopian" alt="">
              </td>
            </tr>
            <tr style="border:solid 1px #333;height:45px">
              <td>民&nbsp;族</td>
              <td>{{ item.minzu_mc }}</td>
              <td>籍&nbsp;贯</td>
              <td>{{ item.jiguan }}</td>
              <td>出生地</td>
              <td>{{ item.chushengdi }}</td>
            </tr>
            <tr style="border:solid 1px #333;height:45px">
              <td>入 党<br>时 间</td>
              <td>{{ item.rdsj }}</td>
              <td>参加工<br>作时间</td>
              <td>{{ item.cjgzsj }}</td>
              <td>健康状况</td>
              <td>{{ item.jiankang }}</td>
            </tr>
            <tr style="border:solid 1px #333;height:45px">
              <td>专业技<br>术职务</td>
              <td colspan="2">{{ item.zyjszw }}</td>
              <td>熟悉专业 有何专长</td>
              <td colspan="2">{{ item.zhuanyejishu }}</td>
            </tr>
            <tr style="border:solid 1px #333;height:45px">
                <td rowspan="2">学 历<br>学 位</td>
                <td>全日制<br>教 育</td>
                <td colspan="2">
                  {{ item.qrzxl_zg }}<br>
                  {{ item.qrzxw_zg }}
                </td>
                <td>毕业院校 系及专业</td>
                <td colspan="3" v-if="item.qrzxlxx_zg === item.qrzxwxx_zg">{{ item.qrzxlxx_zg }}</td>
                <td colspan="3" v-else>
                  {{ item.qrzxlxx_zg }}<br>
                  {{ item.qrzxwxx_zg }}
                </td>
            </tr>
            <tr style="border:solid 1px #333;height:45px">
                <td>在 职<br>教 育</td>
                <td colspan="2">
                  {{item.zzxl_zg}}<br>
                  {{item.zzxw_zg}}
                </td>
                <td>毕业院校 系及专业</td>
                <td colspan="3" v-if="item.zzxlxx_zg === item.zzxwxx_zg">{{ item.zzxlxx_zg }}</td>
                <td colspan="3" v-else>
                  {{ item.zzxlxx_zg }}<br>
                  {{ item.zzxwxx_zg }}
                </td>
            </tr>
            <tr style="border:solid 1px #333;height:45px">
              <td colspan="2">现&nbsp;任&nbsp;职&nbsp;务</td>
              <td colspan="6" style="text-align:left"></td>
            </tr>
            <tr style="border:solid 1px #333;height:45px">
              <td colspan="2">拟&nbsp;任&nbsp;职&nbsp;务</td>
              <td colspan="6" style="text-align:left"></td>
            </tr>
            <tr style="border:solid 1px #333;height:45px">
              <td colspan="2">拟&nbsp;免&nbsp;职&nbsp;务</td>
              <td colspan="6" style="text-align:left"></td>
            </tr>
            <tr style="height: 450px;border: 1px solid #333">
              <td class="">简 <br /><br /> <br /> <br /> <br /> <br /> <br /> <br /> 历</td>
              <td colspan="7" style="text-align:left;height: 450px;">
                <div style="height: 450px;
                            text-align: left;
                            margin-left:2px;
                            white-space: normal;
                            overflow: hidden;
                            font-size:12px;
                            "
                      v-html="item.jianli.replace(/(\r\n|\n|\r)/gm, '<br />')"
                ></div>
              </td>
            </tr>
          </thead>
        </table>
        <div style="page-break-before:always;">
          <br />
          <br />
          <table border="1" class="primt-table print-tableTwo">
            <thead>
              <tr style="height:80px">
                <td style="vertical-align: top; width:60px; height: 76px;" class="ptw48">奖<br>惩<br>情<br>况</td>
                <td colspan="7" style="text-align:left">
                   {{ item.jl }}
                </td>
              </tr>
              <tr style="height:80px">
                <td style="writing-mode:vertical-lr; width: 42px; height: 76px;" class="ptw48 ">
                   <span style="writing-mode:vertical-lr;">年度考<br />核结果</span>
                </td>
                <td colspan="7" style="text-align:left">{{ item.kaohe }}</td>
              </tr>
              <tr style="height:80px">
                <td style="height: 76px;">任<br>免<br>理<br>由</td>
                <td colspan="7" style="text-align:left"></td>
              </tr>
              <tr style="height:40px">
                <td rowspan="9" style="height:450px">
                  家<br>庭<br>主<br>要<br>成<br>员<br>及<br>重<br>要<br>社<br>会<br>关<br>系
                </td>
                <td style="padding:2px 6px;">称&nbsp;谓</td>
                <td style="padding:2px 6px;">姓&nbsp;名</td>
                <td style="padding:2px 6px;" class="pt">出生日期</td>
                <td>政 治<br>面 貌</td>
                <td style="padding:2px 6px;" colspan="3">工作单位及职务</td>
              </tr>
              <template v-if="item.personList">
                <tr style="height: 50px;" v-for="(person, index) in item.personList" :key="index">
                  <td>{{ person.jtcy_chengwei }}</td>
                  <td>{{ person.jtcy_xingming }}</td>
                  <td>{{ person.jtcy_csrq }}</td>
                  <td>{{ person.jtcy_zzmm }}</td>
                  <td colspan="3" style="text-align:left">{{ person.jtcy_gzdwjzw }}</td>
                </tr>
                <!-- 默认展示剩余的空行 -->
                <tr style="height: 50px;" v-for="index in (8 - item.personList.length)" :key="item.personList.length + index">
                  <td></td>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td colspan="3" style="text-align:left"></td>
                </tr>
              </template>
              <tr style="height:90px">
                <td class="ptw48">呈<br>报<br>单<br>位</td>
                <td colspan="7">
                  <div class="cbdw">

                    <div class="cdbwtime"> 年  月  日</div>
                  </div>
                </td>
              </tr>
              <tr style="height:106px">
                <td style="writing-mode:vertical-lr;padding: 10px 0;" class="ptw48 pt">审批机关
                  <div>意见</div>
                </td>
                <td colspan="3">
                  <div class="cbdw">

                    <div class="cdbwtime gz">
                      <div>（盖章）</div>
                      <div>2025 年 1 月 15 日</div>
                    </div>
                  </div>
                </td>
                <td style="writing-mode:vertical-lr; width: 42px; height: 76px;" class="ptw48 ">
                   <span style="writing-mode:vertical-lr;">行政机关<br />任免意见</span>
                </td>
                <td colspan="3">
                  <div class="cbdw">

                    <div class="cdbwtime gz">
                      <div>（盖章）</div>
                      <div>2025 年 1 月 15 日</div>
                    </div>
                  </div>
                </td>
              </tr>
            </thead>
          </table>
          <p style="padding-left: 32px;">填表人：</p>
        </div>
      </div>
    </div>
  </div>
</template>
  
<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => [],
      required: true,
    },
  },
  data() {
    return {
      myPrint: {
        id: 'myprintDom',
        extarCss: ''
      },
    }
  },
  created() {
    for (let i = 0; i < this.list.length; i++) {
        const e = this.list[i];
        var birthDate = new Date(e.csny); // 将csny转换为日期对象
        var currentDate = new Date();
        var ageDiff = currentDate.getTime() - birthDate.getTime();
        var ageDate = new Date(ageDiff); // 从时间差获取Date对象
        this.$set(e, "age", Math.abs(ageDate.getUTCFullYear() - 1970)); // 将计算后的年龄存储在e对象中
    }
  },
  mounted() {
    
  },
  methods: {
    print() {
      this.$refs['printbtn'].click();
    },
  },
}
</script>

<style>
@page {
  size:auto;
  margin:0;
}



</style>

<style lang="scss" scoped>
.myprintbtn {
  display: none;
  font-family: SimSun;
}
#myprintDom {
  position: fixed;
  min-width: 645px;
  left: 900000px;
  font-family: SimSun;
  p {
    margin: 16px 0;
  }
}
@media print {
  #myprintDom {
    position: static;
  }
}
.print-warp {
  margin: 20mm;
}


.print-tableOne {
  width: 100%;
  border: none;
  border-collapse: collapse;
  text-align: center;
  margin-bottom: 5px;
  font-size:16px;
}

.print-tableTwo thead tr {
  color: #000;
}

.print-tableTwo {
  width: 100%;
  border: solid 1px #333;
  border-collapse: collapse;
  text-align: center;
  font-size:16px;
}

.print-tableTwo thead tr {
  color: #000;
}

.primt-table {
  table-layout: fixed;
}

.primt-table thead tr .print-titles {
  font-size: 32px;
  color: 333;
  text-align: center;
}

.primt-table thead tr td {
  // padding: 2px 6px;
  height: 42px;
}

.primt-table thead tr .pt {
  text-align: justify;
  text-align-last: justify;
  word-break: keep-all;
}

.primt-table thead tr .ptw84 {
  width: 84px;
}

.primt-table thead tr .ptw36 {
  width: 36px;
}

.primt-table thead tr .ptw48 {
  width: 48px;
}
.primt-table thead tr .left {
  text-align: left;
}

.primt-table thead tr .cbdw {
  position: relative;
  height: 60px;
  text-align: left;
}

.primt-table thead tr .cbdw .cdbwtime {
  position: absolute;
  right: 10px;
  bottom: 2px;
}

.primt-table thead tr .cbdw .cdbwtime.gz {
  text-align: center;
}
</style>
  